/**
 * 更多菜单
 */
'use strict'
import React,{Component} from 'react'
import PropTypes from 'prop-types'
import {
    TouchableOpacity,
    StyleSheet,
    Image,
    View,
    Text,
    DeviceInfo
} from 'react-native'
import WrapDialog from './WrapDialog'

class MenuDialog extends Component{
    render(){
        const {menus,onSelect,theme,dismiss,self} = this.props;
        return (
            <TouchableOpacity
                style={styles.container}
                onPress={()=>dismiss.call(self)}
            >
                <Image
                    source={require('../../res/images/ic_arrow_back_white_36pt.png')}
                    style={styles.arrow}
                />
                <View
                    style={styles.content}
                >
                    {
                        menus.map((result,i,arr)=>{
                            let menu = arr[i];
                            return <TouchableOpacity
                                key={i}
                                onPress={()=>{
                                    onSelect(arr[i])
                                }}
                                underlayColor={'transparent'}

                            >
                                <View
                                    style={{
                                        alignItems:'center',
                                        flexDirection:'row'
                                    }}
                                >
                                    <Image
                                        source={menu.icon}
                                        resizeMode={'stretch'}
                                        style={[styles.icon,theme.styles.tabBarSelectedIcon]}
                                    />
                                    <Text
                                        style={styles.text}
                                    >{menu.name}</Text>
                                    {
                                        (i!==menus.length-1)? <View
                                            style={styles.line}
                                        ></View>:null
                                    }
                                </View>
                            </TouchableOpacity>
                        })
                    }
                </View>
            </TouchableOpacity>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'rgba(0,0,0,.6)',
        alignItems:'flex-end'
    },
    arrow:{
        marginTop:56+(DeviceInfo.isIPhoneX_deprecated?24:0),
        width:16,
        height:6,
        marginRight:1,
        resizeMode:'contain'
    },
    text:{
        fontSize:16,
        color:'black',
        fontWeight:'400',
        paddingRight:15
    },
    line:{
        height:0.3,
        backgroundColor:'darkgreen'
    },
    content:{
        backgroundColor:'white',
        borderRadius:3,
        paddingTop:3,
        paddingBottom:3,
        marginRight:3
    },
    icon:{
        width:16,
        height:16,
        margin:10,
        marginLeft:15
    }
})

MenuDialog.propTypes = {
    menus:PropTypes.array.isRequired,
    onSelect:PropTypes.func.isRequired,
    theme:PropTypes.object,
    onClose:PropTypes.func
}
MenuDialog.defaultProps={
    menus:[]
}
export default MenuDialog = WrapDialog(MenuDialog)